<% include header.ejs %>
<body class="bg-1 relative">
<% include menu.ejs %>

<div class="calc">
    <ul class="calc-menu">
        <li type-name="xidi" style="cursor: pointer" class="selected calc-li1">洗<br>涤<br>费<br>用<br>测<br>算</li>
        <li type-name="zuxi" style="cursor: pointer" class="calc-li2">租<br>赁<br>费<br>用<br>测<br>算</li>
    </ul>

    <div id="xidi" style="padding:50px 60px 20px 60px;">
        <div class="border-1" style="height: 30px;"><b>请选择费用商品</b><font color="#e70012">*</font><input
                    type-name="xidi"
                    class="allCheck"
                    type="checkbox"
                    style="margin-left:10px;"><label>全选</label>
        </div>
        <div>
            <div class="m10">
                <div class="left" style="width:70px;text-align: right">六件套：</div>
                <div class="left xidi">
                    <div><input type-name="xidi" class="single" type="checkbox" num="1.9" num1="2"
                                num2="2.2"><label>床单</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2.3" num1="2.5" num2="2.5"><label>被罩</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="0.9" num1="1.0" num2="1.0"><label>枕套</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="1.5" num1="1.8" num2="1.8"><label>浴巾</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="1.0" num1="1.2" num2="1.2"><label>地巾</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="1.0" num1="1.0" num2="1.3"><label>毛巾</label>
                    </div>
                </div>
                <br clear="both;">
            </div>
            <div class="m10" style="height:40px;">
                <div class="left " style="text-align: right;">客房其他：</div>
                <div class="left xidi" style="width:90%;">
                    <div><input type-name="xidi" class="single" type="checkbox" num="5" num1="5"
                                num2="5"><label>床罩</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2" num1="2"
                                num2="2"><label>床尾垫</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="5" num1="5"
                                num2="5"><label>保护垫</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="6" num1="6"
                                num2="6"><label>棉被芯</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="3" num1="3"
                                num2="3"><label>棉枕芯</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="6" num1="6"
                                num2="6"><label>羽绒被芯</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="4" num1="4"
                                num2="4"><label>羽绒枕芯</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2.5" num1="2.5" num2="2.5"><label>浴袍</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="0.5" num1="0.5" num2="0.5"><label>面巾</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="0.5" num1="0.5" num2="0.5"><label>方巾</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2.5" num1="2.5" num2="2.5"><label>台衬</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="0.5" num1="0.5" num2="0.5"><label>口布</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="0.5" num1="0.5" num2="0.5"><label>台垫</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="3.5" num1="3.5" num2="3.5"><label>橱衣</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="1" num1="1"
                                num2="1"><label>围裙</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2" num1="2"
                                num2="2"><label>沙帘</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="0.3" num1="0.3" num2="0.3"><label>口杯垫</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2.5" num1="2.5" num2="2.5"><label>椅套</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="3" num1="3"
                                num2="3"><label>橱裤</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="4" num1="4"
                                num2="4"><label>厚帘</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2.5" num1="2.5" num2="2.5"><label>光帘</label>
                    </div>
                </div>
                <br clear="both;">
            </div>
            <div class="m10">
                <div class="left" style="width:70px;text-align: right;">衣服类：</div>
                <div class="left xidi" style="width:90%;">
                    <div><input type-name="xidi" class="single" type="checkbox" num="15" num1="1.8"
                                num2="1.8"><label>大衣</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="7" num1="1.8"
                                num2="1.8"><label>西服</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="4" num1="1.8"
                                num2="1.8"><label>工衣</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="8" num1="1.8"
                                num2="1.8"><label>套装</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="10" num1="1.8"
                                num2="1.8"><label>长裙</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="2" num1="1.8"
                                num2="1.8"><label>领带</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="8" num1="1.8"
                                num2="1.8"><label>门童服</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="3" num1="1.8"
                                num2="1.8"><label>马夹</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="15" num1="1.8"
                                num2="1.8"><label>羽绒服</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="5" num1="1.8"
                                num2="1.8"><label>西裤</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="4" num1="1.8"
                                num2="1.8"><label>工裤</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="4" num1="1.8"
                                num2="1.8"><label>西裙</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="10" num1="1.8"
                                num2="1.8"><label>旗袍</label></div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="0.5" num1="1.8" num2="1.8"><label>三角巾</label>
                    </div>
                    <div><input type-name="xidi" class="single" type="checkbox" num="1" num1="1.8"
                                num2="1.8"><label>帽子</label></div>
                </div>
                <br clear="both">
            </div>

        </div>
        <div class="border-1" style="height: 30px; margin-top:15px;"><b>请选择酒店类型</b><font
                    color="#e70012">*</font></div>
        <div class="m10" style="height:60px;">
            <ul class="hotel" type-name="xidi">
                <li class="selected" ratio="num">经济</li>
                <li ratio="num1">中档</li>
                <li ratio="num2">星级</li>
            </ul>
        </div>
        <div style="height:40px;line-height: 40px;background: #f8f8f8;border-top:1px solid #e4e4e4;">
            <div class="left" style="width:70px;text-align: right">价格：</div>
            <input type="number" id="xidi-fee-number" hidden>
                                <!--<input type="number" id="xidi-fee-number2" hidden>-->

            <div class="right f16" style="margin-right:10px;">预计：<b class="c1">￥</b><b id="xidi-fee" class="c1">0.00</b>
            </div>
        </div>
        <div class="m10 f12" style="color:#888">
            说明：
            <p>1. 如果用户对洗涤标准、洗料、运输等有特殊要求，价格需另行协商；</p>
            <p>2. 支付方式分为两种：一般后付模式、每月预付模式；</p>
            <p>3. 每月预付模式可享有超低9折优惠；</p>
            <p>4. 其他优惠政策可咨询市场服务人员；</p>
        </div>
    </div>

    <div id="zuxi" style="display:none;padding:50px 60px 60px 60px;">
        <div class="border-1" style="height: 30px;"><b>请选择租洗费用商品</b><font color="#e70012">*</font><input
                    type-name="zuxi" class="allCheck" type="checkbox" style="margin-left:10px;"><label>全选</label>
        </div>
        <div style="height:95px;">
            <div class="m10" style="height:28px; line-height: 28px;">
                <div class="left" style="width:70px;text-align: right">六件套：</div>
                <div class="left xidi">
                    <div><input type-name="zuxi" class="single" type="checkbox" num="1.70" num1="1.85"
                                num2="1.95" num3="2.15" num4="2.35"><label>床单</label></div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="3.00" num1="3.05"
                                num2="3.15" num3="3.35" num4="3.50"><label>被罩</label>
                    </div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="0.82" num1="0.82"
                                num2="0.82" num3="0.82" num4="0.82"><label>枕套</label>
                    </div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="0.98" num1="0.98"
                                num2="0.98" num3="0.98" num4="0.98"><label>浴巾</label>
                    </div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="0.90" num1="0.90"
                                num2="0.90" num3="0.90" num4="0.90"><label>地巾</label>
                    </div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="1.00" num1="1.00"
                                num2="1.00" num3="1.00" num4="1.00"><label>中巾</label>
                    </div>
                </div>
                <br clear="both;">
            </div>
            <div class="m10"></div>
            <!-- <div class="m10" style="height:24px; line-height: 24px;">
                <div class="left " style="text-align: right;">客房其他：</div>
                <div class="left xidi" style="width:90%;">
                    <div><input type-name="zuxi" class="single" type="checkbox" num="1"><label>床单</label></div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="1"><label>床单</label></div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="1"><label>床单</label></div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="1"><label>床单</label></div>
                    <div><input type-name="zuxi" class="single" type="checkbox" num="1"><label>床单</label></div>
                </div>
            </div>-->
        </div>
        <div class="border-1" style="height: 30px; margin-top:15px;"><b>请选择布草尺寸</b><font
                    color="#e70012">*</font></div>
        <div class="m10" style="height:60px;">
            <ul class="hotel" type-name="zuxi">
                <li class="selected" ratio="num">1.2米</li>
                <li ratio="num1">1.35米</li>
                <li ratio="num2">1.5米</li>
                <li ratio="num3">1.8米</li>
                <li ratio="num4">2.0米</li>
            </ul>
        </div>
        <div style="height:40px;line-height: 40px;background: #f8f8f8;border-top:1px solid #e4e4e4;">
            <div class="left" style="width:70px;text-align: right">租洗价格：</div>
            <input type="number" id="zuxi-fee-number" hidden>
            <!--                    <input type="number" id="zuxi-fee-number2" hidden>-->
            <div class="right f16 " style="margin-right:10px;">预计：<b class="c1">￥</b><b id="zuxi-fee"
                                                                                        class="c1">0.00</b>
            </div>
        </div>
    </div>
</div>

<% include footer.ejs %>

<script>
    $(function () {
        $('.hotel li').click(function () {
            var typeName = $(this).parent('ul').attr('type-name');
            var ratio = $(this).attr('ratio');
            $('.hotel li.selected').removeClass('selected');
            $(this).addClass('selected');
            var totalFeeEle = $('#' + typeName + '-fee');
            var totalFeeNumber = $('#' + typeName + '-fee-number');
            $(totalFeeNumber).val(0);
            $('#' + typeName).find('input.single').each(function (idx, element) {
                if ($(this).is(':checked')) {
                    var singleFee = Number($(this).attr(ratio)) ;
                    totalFeeNumber.val(Number($(totalFeeNumber).val()) + singleFee);
                    $(totalFeeEle).html(Number(totalFeeNumber.val()).toFixed(2));
                }
            });
        });

        $('.calc-menu li').click(function () {
            var thisTypeName = $(this).attr('type-name');
            var sibling = $(this).siblings()[0];
            var sblingTypeName = $(sibling).attr('type-name');
            $(sibling).removeClass('selected');
            $(this).addClass('selected')

            $('#' + thisTypeName).show();
            $('#' + sblingTypeName).hide();
        });
        $('.single').click(function () {
            var typeName = $(this).attr('type-name');
            var ratio = $('.hotel li.selected').attr('ratio');
            var totalFeeEle = $('#' + typeName + '-fee');
            var totalFeeNumber = $('#' + typeName + '-fee-number');
            console.info($(this).attr('num'));
            var singleFee = Number($(this).attr(ratio)) ;
            if ($(this).is(':checked')) {
                totalFeeNumber.val(Number($(totalFeeNumber).val()) + singleFee);
            } else {
                totalFeeNumber.val(Number($(totalFeeNumber).val()) - singleFee);
            }
            $(totalFeeEle).html(Number(totalFeeNumber.val()).toFixed(2));
        })
        $('.allCheck').click(function () {
            var isCehecked = $(this).is(':checked');
            var typeName = $(this).attr('type-name');
            $('#' + typeName).find('input.single').each(function (idx, element) {
                var isSingleChecked = $(this).is(':checked');
                if (isCehecked != isSingleChecked) {
                    $(this).click();
                }
            })
        });


    })
</script>